.drone-management {
  box-sizing: border-box;
  font-family: 'SourceHanSansSC', 'DINAlternate', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient( 180deg, rgba(20,25,31,0.6) 0%, rgba(60,66,73,0.6) 100%), linear-gradient( 178deg, rgba(9,11,13,0) 0%, #26394D 100%), radial-gradient( 185% 43% at 53% -3%, rgba(166,213,255,0.5) 0%, rgba(166,209,255,0) 24%, rgba(179,212,255,0) 100%);
  &__drone-card {
    box-sizing: border-box;
    transition: all 0.3s ease;
    border-radius: 8px;

    &:hover {
      background: rgba(26, 215, 255, 0.1);
      border-color: rgba(26, 215, 255, 0.3);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(26, 215, 255, 0.2);
    }

    &:active {
      transform: translateY(0);
    }
  }

  &__drone-icon {
    box-sizing: border-box;
    transition: all 0.3s ease;

    .drone-management__drone-card:hover & {
      transform: scale(1.05);
      filter: brightness(1.2) drop-shadow(0 0 8px rgba(26, 215, 255, 0.5));
    }
  }

  &__drone-content {
    box-sizing: border-box;
    transition: all 0.3s ease;
  }

  &__drone-id {
    box-sizing: border-box;
    transition: all 0.3s ease;
    font-family: 'DINAlternate';
    font-weight: bold;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 20%, #81C6FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    z-index: 1;
    .drone-management__drone-card:hover & {
      transform: scale(1.05);
      animation: pulse 0.5s ease-in-out;
    }
  }

  &__drone-progress {
    box-sizing: border-box;
    transition: all 0.3s ease;
    //animation: progressGlow 2s ease-in-out infinite alternate;

    .drone-management__drone-card:hover & {
      opacity: 0.8 !important;
      transform: scale(1.02);
    }
  }

  &__drone-info {
    box-sizing: border-box;
    transition: all 0.3s ease;
  }

  &__info-group {
    box-sizing: border-box;
    transition: all 0.3s ease;

    .drone-management__drone-card:hover & {
      transform: translateX(2px);
    }
  }

  &__info-label {
    box-sizing: border-box;
    transition: all 0.3s ease;

    .drone-management__drone-card:hover & {
      color: rgba(255, 255, 255, 1) !important;
    }
  }

  &__info-value {
    box-sizing: border-box;
    transition: all 0.3s ease;

    .drone-management__drone-card:hover & {
      color: #1AD7FF !important;
      text-shadow: 0 0 5px rgba(26, 215, 255, 0.5);
    }
  }

  // 编号发光动画
  @keyframes glow {
    from {
      text-shadow: 0 0 5px rgba(26, 215, 255, 0.5);
    }
    to {
      text-shadow: 0 0 10px rgba(26, 215, 255, 0.8), 0 0 15px rgba(26, 215, 255, 0.6);
    }
  }

  // 脉冲动画
  @keyframes pulse {
    0% {
      transform: scale(1.05);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1.05);
    }
  }

  // 进度条发光动画
  @keyframes progressGlow {
    from {
      box-shadow: 0 0 5px rgba(52, 165, 255, 0.3);
    }
    to {
      box-shadow: 0 0 10px rgba(52, 165, 255, 0.6), 0 0 15px rgba(52, 165, 255, 0.4);
    }
  }

  // 卡片进入动画
  &__drone-card {
    animation: slideInUp 0.5s ease-out;
    animation-fill-mode: both;

    @for $i from 1 through 10 {
      &:nth-child(#{$i}) {
        animation-delay: #{$i * 0.1}s;
      }
    }
  }

  @keyframes slideInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  // 图标旋转动画
  &__drone-icon {
    .drone-management__drone-card:hover & {
      animation: iconRotate 2s ease-in-out infinite;
    }
  }

  @keyframes iconRotate {
    0% {
      transform: scale(1.05) rotate(0deg);
    }
    25% {
      transform: scale(1.05) rotate(2deg);
    }
    75% {
      transform: scale(1.05) rotate(-2deg);
    }
    100% {
      transform: scale(1.05) rotate(0deg);
    }
  }

  // 信息组进入动画
  &__info-group {
    animation: fadeInLeft 0.3s ease-out;
    animation-fill-mode: both;

    @for $i from 1 through 5 {
      &:nth-child(#{$i}) {
        animation-delay: #{$i * 0.05}s;
      }
    }
  }

  @keyframes fadeInLeft {
    from {
      opacity: 0;
      transform: translateX(-10px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  // 网格布局优化
  &.drone-management--grid {
    .drone-management__drone-card {
      justify-self: center;
      align-self: center;
    }
  }

  // 弹性布局优化
  &.drone-management--flex {
    .drone-management__drone-card {
      flex: 1;
      min-width: 0;
    }
  }
}
